<script setup lang="ts">
import axios from 'axios';
import { onMounted, ref } from 'vue';
// 使用TS的时候，axios()调用需要改为 axios.request()，可以使用泛型
// 1. 使用泛型的目的的告诉axios返回数据的类型如何
// 2. 泛型的类型需要和接口返回的一致，否则无意义
// 频道对象
type ChannelItem = {
  id: number;
  name: string;
};

// 频道接口响应数据
type ChannelResData = {
  data: {
    channels: ChannelItem[];
  };
  message: string;
};

const list=ref<ChannelItem[]>([])
// axios({url:''})
// axios 获取数据 并渲染出列表
onMounted(async ()=>{
const res=await axios.get<ChannelResData>('http://geek.itheima.net/v1_0/channels')
// console.log(res.data.data)
list.value=res.data.data.channels
})

import { useChannelStore } from '@/stores/channel';
const store=useChannelStore()
  </script>

<template>
  <div class="channel-nav">
    <nav class="list">
      <a
        class="item"
        :class="{ active: item.id === store.channelId }"
        href="javascript:;"
        v-for="(item) in list"
        :key="item.id"
        @click="store.changeChannel(item.id)"
      >
        推荐{{ item.name }}
      </a>
    </nav>
  </div>
</template>